<template>
    <page-layout-content class="parameters">
        <div class="parameters-head">
            报警参数设置
        </div>
        <div class="parameters-content" :style="{background: '#fff' }">
            <div class="parameters-content-select">
                <p>设置方式</p>
                <a-form :form="setModeForm" layout="inline">
                    <a-radio-group name="radioGroup" v-model="setMode">
                        <a-radio :value="1">
                            按机构设置
                        </a-radio>
                        <a-form-item style="vertical-align: 9px;">
                            <a-tree-select
                                    style="width: 154px"
                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                    :tree-data="treeData"
                                    placeholder="机构"
                                    defaultValue="世纪启明"
                                    :disabled="setMode !== 1"
                                    tree-default-expand-all
                            />
                        </a-form-item>
                        <span class="parameters-content-select-space"></span>
                        <a-radio :value="2">
                            按单个用户设置
                        </a-radio>
                        <a-form-item style="vertical-align: 9px;">
                            <a-input
                                    :disabled="setMode !== 2"
                                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                            />
                        </a-form-item>
                    </a-radio-group>
                </a-form>
            </div>
            <div class="parameters-content-module">
                <div class="parameters-content-module-option">
                    <a-form layout="horizontal" :form="optionForm" labelAlign="left">
<!--                        <p class="parameters-content-module-option-title">体温</p>-->
<!--                        <a-form-item label="安全范围"-->
<!--                                     :label-col="{span: 4}"-->
<!--                                     :wrapper-col="{span: 20}">-->
<!--                            <div class="parameters-content-module-option-warp">-->
<!--                                <a-input-number-->
<!--                                        v-decorator="['option1', {initialValue: defData['option1']}]"-->
<!--                                        style="width:100px;" :min="36" :max="37" :step="0.1" />-->
<!--                                <i>~</i>-->
<!--                                <a-input-number-->
<!--                                        v-decorator="['option2', {initialValue: defData['option2']}]"-->
<!--                                        style="width:100px;" :min="36" :max="37" :step="0.1" />-->
<!--                                &nbsp;度-->
<!--                            </div>-->
<!--                        </a-form-item>-->
                        <p class="parameters-content-module-option-title">心率</p>
                        <a-form-item label="安全范围"
                                     :label-col="{span: 4}"
                                     :wrapper-col="{span: 20}">
                            <div class="parameters-content-module-option-warp">
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option3', {initialValue: 65}]"
                                        style="width:100px;" :min="55" :max="110"/>
                                <i>~</i>
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option4', {initialValue: 67}]"
                                        style="width:100px;" :min="60" :max="100"/>
                                &nbsp;bpm
                            </div>
                        </a-form-item>
                        <p class="parameters-content-module-option-title">血压</p>
                        <span class="parameters-content-module-option-subtitle">标准值</span>
                        <a-form-item label="高压"
                                     :label-col="{span: 4}"
                                     :wrapper-col="{span: 20}">
                            <div class="parameters-content-module-option-warp">
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option5', {initialValue: 92}]"
                                        style="width:222px;" :min="90" :max="139" />
                                mmHg
                            </div>
                        </a-form-item>
                        <a-form-item label="低压"
                                     :label-col="{span: 4}"
                                     :wrapper-col="{span: 20}">
                            <div class="parameters-content-module-option-warp">
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option6', {initialValue: 67}]"
                                        style="width:222px;" :min="60" :max="90" :step="0" />
                                mmHg
                            </div>
                        </a-form-item>
                        <span class="parameters-content-module-option-subtitle">安全范围</span>
                        <a-form-item label="高压"
                                     :label-col="{span: 4}"
                                     :wrapper-col="{span: 20}">
                            <div class="parameters-content-module-option-warp">
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option7', {initialValue: 91}]"
                                        style="width:100px;" :min="90" :max="140" />
                                <i>~</i>
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option8', {initialValue: 111}]"
                                        style="width:100px;" :min="90" :max="140" />
                                &nbsp;mmHg
                            </div>
                        </a-form-item>
                        <a-form-item label="低压"
                                     :label-col="{span: 4}"
                                     :wrapper-col="{span: 20}">
                            <div class="parameters-content-module-option-warp">
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        v-decorator="['option9', {initialValue: 65}]"
                                        :min="60" :max="89"
                                        style="width:100px;"/>
                                <i>~</i>
                                <a-input-number
                                        :formatter="limitNumber" :parser="limitNumber"
                                        :min="60" :max="90"
                                        v-decorator="['option10', {initialValue: 89}]"
                                        style="width:100px;" />
                                &nbsp;mmHg
                            </div>
                        </a-form-item>
                    </a-form>
                    <a-button type="primary" style="width: 163px;margin: 50px auto 20px auto;display: block;">
                        保存
                    </a-button>
                </div>
                <div class="parameters-content-module-map">
                    <p class="parameters-content-module-map-title">电子围栏
                        <a-button type="link" @click="addFence">
                            添加
                        </a-button>
                    </p>
                    <p class="parameters-content-module-map-nodfind" v-if="!fenceList.length">暂无围栏数据</p>
                    <a-tabs
                            v-else
                            :default-active-key="0"
                            :style="{ height: '40px', width: '100%' }"
                            @prevClick="fenceCallback"
                            @nextClick="fenceCallback"

                    >
                        <a-tab-pane v-for="(i, index) in fenceList" :key="i.gid">
                             <span slot="tab" class="parameters-content-module-map-fence"
                                   :style="selectMapkerId === i.gid ? {color: '#1890ff', borderColor: '#1890ff'} : {}"
                                   @click="setMarker(i)">
                                 <span  class="parameters-content-module-map-fence-del" @click.stop="showDelConfirm(i)">
                                    <a-icon type="close-circle" theme="filled"/>
                                 </span>
                                {{++index}}.{{i.name}}
                              </span>
                        </a-tab-pane>
                    </a-tabs>
                    <div class="parameters-content-module-map-content">
                        <mapLoading ref="mapLoading"/>
                        <div id="parametersMap"></div>
                    </div>
                </div>
            </div>
        </div>
    </page-layout-content>
</template>

<script>
    const treeData = [
        {
            title: '北京世纪启明风险管理有限公司',
            value: '0-0',
            key: '0-0',
            children: [
                {
                    title: '世纪启明武汉分公司公司',
                    value: '0-0-1',
                    key: '0-0-1',
                },
                {
                    title: '世纪启明杭州分公司公司',
                    value: '0-0-2',
                    key: '0-0-2',
                },
                {
                    title: '世纪启明上海分公司公司',
                    value: '0-0-3',
                    key: '0-0-3',
                },
            ],
        },
        {
            title: '北京金高桥软件有限公司',
            value: '1-1',
            key: '1-1',
            children: [
                {
                    title: '北京金高桥软件武汉分公司',
                    value: '1-1-1',
                    key: '1-1-1',
                },
                {
                    title: '北京金高桥软件杭州分公司',
                    value: '1-1-2',
                    key: '1-1-2',
                },
                {
                    title: '北京金高桥软件上海分公司',
                    value: '1-1-3',
                    key: '1-1-3',
                },
            ],
        },
        {
            title: '魔嗖科技有限公司',
            value: '2-2',
            key: '2-2',
            children: [
                {
                    title: '魔嗖科技武汉分公司',
                    value: '2-2-1',
                    key: '2-2-1',
                },
                {
                    title: '魔嗖科技杭州分公司',
                    value: '2-2-2',
                    key: '2-2-2',
                },
                {
                    title: '魔嗖科技上海分公司',
                    value: '2-2-3',
                    key: '2-2-3',
                },
            ],
        },
        {
            title: '红中科技有限公司',
            value: '3-3',
            key: '3-3',
            children: [
                {
                    title: '红中科技武汉分公司',
                    value: '3-3-1',
                    key: '3-3-1',
                },
                {
                    title: '红中科技杭州分公司',
                    value: '3-3-2',
                    key: '3-3-2',
                },
                {
                    title: '红中科技上海分公司',
                    value: '3-3-3',
                    key: '3-3-3',
                },
            ],
        },
    ];
    import {limitNumber} from "../../utils/util";
    import PageLayoutContent from "../../components/pageLayoutContent";
    import mapLoading from "../../components/mapLoading";
    import {getFence, delFence} from "../../services/geofence";
    import Mock from 'mockjs';
    import AMap from 'AMap';
    export default {
        name: "parameters",
        components: {PageLayoutContent, mapLoading},
        data() {
            return {
                setMode: 1,
                setModeForm: this.$form.createForm(this, {}),
                optionForm: this.$form.createForm(this, {}),
                fenceList: [],
                map: null,
                treeData,
                selectMapkerId: null,
                defData: {},
            }
        },
        mounted() {
            this.map = new AMap.Map("parametersMap", {
                resizeEnable: true
            });
        },
        created() {
           this.initMap();
           let data = {};
           for (let i = 1; i <= 10; i++) {
               data['option'+i] = Mock.Random.float( 60, 100, 1, 2)
           }
           this.defData = data;
        },
        methods: {
            limitNumber,
            initMap() {
                this.$refs['mapLoading'] && this.$refs['mapLoading'].showLoading();
                let groups = this.fenceList.map(({markerDon}) => markerDon);
                this.map && this.map.remove(groups);
                getFence({
                    page_size: 30
                }).then(({data}) => {
                    let {rs_list} = data.data;
                    this.$nextTick(() => {
                        this.fenceList = rs_list.filter(v => v.enable).map(value => {
                            let markerDon = null;
                            if (value.points) {
                                markerDon = new AMap.Polygon({
                                    path: value.points.split(';').map(v => v.split(',')),
                                    strokeColor: "#62ace5",
                                    strokeWeight: 1,
                                    strokeOpacity: 1,
                                    fillOpacity: 0.5,
                                    fillColor: '#9cc5e8',
                                    zIndex: 50,
                                })
                                this.map.add(markerDon)
                            } else{
                                markerDon = new AMap.Circle({
                                    center: value.center.split(','),
                                    radius: value.radius, //半径
                                    strokeColor: "#62ace5",
                                    strokeWeight: 1,
                                    strokeOpacity:1,
                                    fillOpacity: 0.5,
                                    fillColor: '#9cc5e8',
                                    zIndex: 50,
                                })
                                markerDon.setMap(this.map)
                            }
                            return {
                                ...value,
                                markerDon
                            }
                        })
                        this.map.setFitView();
                        this.$refs['mapLoading'] && this.$refs['mapLoading'].hideMapLoading();
                    })
                })
            },
            setMarker(item) {
                let mar = this.selectMapkerId === item.gid ? null : [item.markerDon]
                this.selectMapkerId = this.selectMapkerId === item.gid ? '' : item.gid;
                this.map.setFitView(mar)
            },
            showDelConfirm({gid}) {
                let _this = this;
                this.$confirm({
                    title: '是否确认删除电子围栏?',
                    centered:true,
                    content: '删除将无法恢复！',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve) => {
                            delFence({gid}).then(({data}) => {
                                let {data:response} = data;
                                if (response.status == '0') {
                                    setTimeout(() => {
                                        _this.$message.success('删除成功');
                                        _this.initMap();
                                        resolve();
                                    }, 500)
                                } else {
                                    _this.$message.warning(response.message);
                                }
                            })
                        }).catch(() => console.log('Oops errors!'));
                    },
                    onCancel() {},
                });
            },
            fenceCallback(e) {
                console.log(e);
            },
            addFence() {
                this.$router.push('/system/parameters/createFence')
            }
        }
    }
</script>

<style lang="less">
    .parameters{
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .parameters-head {
        height: 58px;
        display: flex;
        padding: 0 30px;
        color: rgba(80, 80, 80, 1);
        font-size: 16px;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #e5e5e5;
    }

    .parameters-content {
        padding: 10px 20px 0 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        &-select {
            background-color: rgba(232, 232, 232, 0.4);
            font-size: 14px;
            padding: 12px 12px 0px 12px;
            &-space{
                display: inline-block;
                width: 137px;
            }
            p {
                color: rgba(80, 80, 80, 1);
                font-size: 16px;
                text-align: left;
                font-weight: bold;
            }
        }
        &-module{
            display: flex;
            padding: 10px 0 0 10px;
            flex: 1;
            &-option{
                max-width: 400px;
                min-height: 600px;
                flex: 1;
                border-right: 1px #f5f5f5 solid;
                .ant-form-item{
                    margin-bottom: 10px!important;
                }
                &-title{
                    color: rgba(80, 80, 80, 1);
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    margin-top: 30px;
                    &:first-child{
                        margin-top: 0;
                    }
                }
                &-subtitle{
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    text-align: left;
                }
                .ant-form-item-label > label{
                    color: rgba(80, 80, 80, 1);
                    font-size: 14px;
                }
                &-warp{
                    i{
                        padding: 0 8px;
                    }
                }
            }
            &-map{
                flex: 1;
                display: flex;
                flex-direction: column;
                width: 300px;
                &-content{
                    flex: .9;
                    margin: 10px 0 0 20px;
                    background: #1f1f1f;
                    position: relative;
                    #parametersMap{
                        height: 100%;
                        width: 100%;
                    }
                }
                &-nodfind{
                    font-size: 12px;
                    color: #8c8c8c;
                    text-align: center;
                    padding: 10px;
                    margin: 0;
                }
                &-fence{
                    display: inline-flex;
                    height: 28px;
                    color: rgba(80, 80, 80, 1);
                    font-size: 12px;
                    border: rgba(166, 166, 166, 1) dashed 1px;
                    padding: 0 5px;
                    line-height: 28px;
                    position: relative;
                    transition: all .3s linear;
                    &-del{
                        position: absolute;
                        right: -19px;
                        top: -13px;
                        font-size: 14px;
                        color: rgba(164, 164, 165, 1);
                        transition: all .3s linear;
                        border-radius: 50%;
                        z-index: 2;
                        &:hover{
                            color: #1f1f1f!important;
                        }
                    }
                }
                .ant-tabs-nav .ant-tabs-tab-active{
                    color: #505050!important;
                    font-weight: normal;
                }
                .ant-tabs-nav .ant-tabs-tab{
                    color: #505050!important;
                    padding: 10px 0px 10px 20px;
                    margin: 0!important;
                }
                &-title{
                    color: rgba(80, 80, 80, 1);
                    font-size: 16px;
                    text-align: left;
                    font-weight: bold;
                    display: flex;
                    padding: 0  0 0 20px;
                    margin: 0;
                    justify-content: space-between;
                }
            }
        }
    }
</style>
